<template>
  <div>
  <!-- 顶部导航栏 -->
<van-nav-bar
  title="地图找房"
  left-arrow
  @click-left="left"
/>
<!-- 自定义地图 -->
  <baidu-map class="map"  :center="center" :zoom="15">
    <!-- 放大缩小 -->
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM"></bm-scale>
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
    <!-- 自定义圆 -->
    <bm-overlay
    v-for="item in res" :key="item.value"
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw">
    <p>{{res.label}}<br/>{{res.tao}}</p>
  </bm-overlay>
 <!-- :position="{lng: 116.404, lat: 39.915}" -->

  </baidu-map>

  </div>
</template>

<script>
import router from '@/router'
import { mapm } from '@/api/map'
export default {
  async created () {
    const res = await mapm()
    console.log(res)
    this.res = res
    console.log(this.res)
  },
  props: ['text', 'active'],
  data () {
    return {
      center: { lng: 116.404, lat: 39.915 },
      res: {}
    }
  },
  // watch: {
  //   position: {
  //     handler () {
  //       this.$refs.customOverlay.reload()
  //     },
  //     deep: true
  //   }
  // },
  methods: {
    handleClick () {
      global.alert('Well done.')
    },
    draw ({ el, BMap, map }) {
      // const { lng, lat } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    left () {
      router.push('/home-page')
    }
  }
}
</script>

<style lang='less' scoped>
.map {
  width: 100%;
  height: 100vh;
}
.sample {
  width: 40px;
  height: 40px;
  // line-height: 40px;
  background: #23b975;
  overflow: hidden;
  border: 2px solid #fff;
  // box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  p {
    margin: 0;
  }
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>
